<template>
  <span class="ivz-btn-item ivz-item-draggable" :class="activeClass()">
    <a-button :disabled="model.disabled" :ghost="model.ghost"
        :shape="model.shape" :size="model.size" :block="model.block"
        :type="model.btnType" @click.stop="activeHandle" class="ivz-bi-fun">
      {{model.title}}
    </a-button>
    <ivz-icon type="iz-icon-delete" @click.native.stop="delItem"/>
  </span>
</template>

<script>
import {mapMutations} from "vuex";
import {getFunTabMetas} from "@/metas/FunTabMetas";

export default {
  name: "IvzBtnItem",
  props: ['meta', 'type'],
  data() {
    return {
      model: {}
    }
  },
  created() {
    this.meta['tabMetas'] = getFunTabMetas(this.type);

    this.initMeta(this.meta);
    this.model = this.meta['tabModel'];

    this.activeHandle();
  },
  mounted() {

  },
  methods: {
    ...mapMutations(['initMeta', 'switchActiveMetaTo']),
    activeHandle() {
      if(!this.meta['active']) {
        this.switchActiveMetaTo(this.meta);
      }
    },
    delItem() {
      this.$emit("remove", this.meta)
    },
    activeClass() {
      return this.meta.active ? 'btn-active ivz-item-active' : '';
    }
  }
}
</script>

<style>
.ivz-item-draggable .ant-btn {
  cursor: move!important;
}
.btn-active .ant-btn{
  padding-right: 23px;
}
.ivz-btn-item.btn-active .anticon{
  top: 0px;
  right: 7px;
  cursor: pointer;
  display: inline;
  position: absolute;
}
.ivz-btn-item .anticon {
  display: none;
}
.ivz-bi-fun {
  margin: 0px 3px;
}
</style>
